<template>
  <div class="container-fluid">
    <!-- 顶部导航栏 -->
    <header class="col-md-12 bg-primary text-white p-3">
      <div class="row justify-content-between align-items-center">
        <div class="col-md-6">
          <h1>停车场管理系统</h1>
        </div>
        <div class="col-md-6 text-right">
          <span>{{ username }}</span>
          <router-link to="/" class="btn btn-light ml-2">返回首页</router-link>
          <button @click="logout" class="btn btn-light ml-2">退出</button>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="col-md-12 mt-4">
      <div class="card">
        <div class="card-header bg-secondary text-white">
          <h2 class="text-center">密码设置</h2>
        </div>
        <div class="card-body">
          <form @submit.prevent="changePassword">
            <div class="form-group">
              <label for="currentPassword">当前密码</label>
              <input 
                type="password" 
                class="form-control" 
                id="currentPassword" 
                placeholder="请输入当前密码" 
                v-model="passwordForm.currentPassword"
                required
              >
            </div>
            <div class="form-group">
              <label for="newPassword">新密码</label>
              <input 
                type="password" 
                class="form-control" 
                id="newPassword" 
                placeholder="请输入新密码" 
                v-model="passwordForm.newPassword"
                required
              >
              <small class="form-text text-muted">密码至少6位，包含字母和数字</small>
            </div>
            <div class="form-group">
              <label for="confirmPassword">确认新密码</label>
              <input 
                type="password" 
                class="form-control" 
                id="confirmPassword" 
                placeholder="请再次输入新密码" 
                v-model="passwordForm.confirmPassword"
                required
              >
            </div>
            <button type="submit" class="btn btn-primary">修改密码</button>
            <router-link to="/" class="btn btn-secondary ml-2">取消</router-link>
          </form>
          
          <!-- 消息提示 -->
          <div v-if="message" class="mt-4">
            <div 
              :class="['alert', messageType === 'error' ? 'alert-danger' : 'alert-success']"
              role="alert"
            >
              {{ message }}
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'PasswordSettingsView',
  data() {
    return {
      username: '',
      passwordForm: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      message: '',
      messageType: ''
    }
  },
  mounted() {
    this.username = localStorage.getItem('username') || '管理员'
  },
  methods: {
    logout() {
      localStorage.removeItem('isLoggedIn')
      localStorage.removeItem('username')
      this.$router.push('/login')
    },
    
    validatePassword(password) {
      // 至少6位，包含字母和数字
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/
      return passwordRegex.test(password)
    },
    
    async changePassword() {
      // 验证新密码格式
      if (!this.validatePassword(this.passwordForm.newPassword)) {
        this.showMessage('新密码不符合要求，请确保密码至少6位，包含字母和数字', 'error')
        return
      }
      
      // 验证两次输入的新密码是否一致
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.showMessage('两次输入的新密码不一致，请重新输入', 'error')
        return
      }
      
      try {
        // 模拟修改密码请求
        // 在实际应用中，这里会发送API请求到后端
        const response = await this.simulatePasswordChange()
        
        if (response.success) {
          this.showMessage('密码修改成功，请重新登录', 'success')
          
          // 清除表单
          this.passwordForm = {
            currentPassword: '',
            newPassword: '',
            confirmPassword: ''
          }
          
          // 延迟跳转到登录页面
          setTimeout(() => {
            this.logout()
          }, 2000)
        } else {
          this.showMessage(response.message || '密码修改失败，请重试', 'error')
        }
      } catch (error) {
        this.showMessage('密码修改失败，请重试', 'error')
        console.error('Password change error:', error)
      }
    },
    
    showMessage(message, type = 'error') {
      this.message = message
      this.messageType = type
      
      // 5秒后清除消息
      setTimeout(() => {
        this.message = ''
      }, 5000)
    },
    
    // 模拟密码修改请求
    simulatePasswordChange() {
      return new Promise((resolve) => {
        // 模拟网络延迟
        setTimeout(() => {
          // 简单模拟成功响应
          if (this.passwordForm.currentPassword && this.passwordForm.newPassword) {
            resolve({
              success: true,
              message: '密码修改成功'
            })
          } else {
            resolve({
              success: false,
              message: '密码修改失败'
            })
          }
        }, 1000)
      })
    }
  }
}
</script>

<style >
/* 这里可以添加组件特定的样式 */
</style>